<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

    <div id="box" >
        <ul id="cont1">
    <%--        <c:forEach items="${list}" var="lis">
                <li><img src="${lis.heardUrl}"
                         style="border-radius: 50%;width: 0.4rem;height: 0.4rem " />
                    <span style="font-size: 0.3rem;color: rgba(178,54,198,0.85)">${lis.des}</span></li>
            </c:forEach>--%>

            <c:forEach items="${list}" var="lis">
                <li style="margin-left: 1rem;margin-top: 0rem;padding-top: 0.5rem">
                    <img src="${lis.heardUrl}"
                     style="border-radius: 50%;width: 1.2rem;height: 1.2rem;" />
                <span style="font-size: 1.2rem;color: white">${lis.des}</span>&nbsp;&nbsp;
                </li>
            </c:forEach>
        </ul>
        <c:if test="${list.size() > 1 }">
            <ul id="cont2"></ul>
        </c:if>

    </div>


<%--<c:if test="${fn:length(list)>0}">
    <div style="background-color: black;opacity:0.5;height: 0.5rem;
    line-height:0.1rem;text-align: center;border-radius:50%;width: 2rem"  onclick="noFloatData()">
        <text style="font-size: 0.3rem;color: white">关闭弹幕</text>
    </div>
</c:if>--%>
<script >

    var area = document.getElementById('box');
    var cont1 = document.getElementById('cont1');
    var cont2 = document.getElementById('cont2');

    area.scrollTop = 0;
    // 克隆cont1给cont2
    cont2.innerHTML = cont1.innerHTML;

    function myScroll() {
       /* console.log("cont1.scrollHeight"+cont1.scrollHeight);
        console.log("area.scrollTop"+area.scrollTop);*/
        if(area.scrollTop >= cont1.scrollHeight) {
            console.log(123)
            area.scrollTop = 0;
        }else {
            area.scrollTop++;
        }
    }

    var time = 50;
    var interval = setInterval('myScroll()', time);

    area.onmouseover = function () {
        clearInterval(interval);
    };

    area.onmouseout = function () {
        // 继续执行之前的定时器
        interval = setInterval('myScroll()', time);
    };

</script>



